<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <span style="float: right">所属组织：{{ tenantName }}</span>
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="8" :sm="8">
                <a-form-item label="应用系统" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                  <a-select
                    placeholder="请选择应用系统"
                    :autoClearSearchValue="true"
                    style="width: 100%"
                    v-model="queryParam.appId"
                    :getPopupContainer="(target) => target.parentNode">
                    <a-select-option :value="undefined">请选择</a-select-option>
                    <a-select-option v-for="(item, index) in appList" :key="index" :value="item.id">
                      {{ item.appName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="8" :sm="24">
                  <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>

        <div style="margin-top: 15px">
          <a-table
            style="height:500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a v-has="'role:authAssign'" @click="appRoleEnable(record)" v-if="!record.isDefault && !record.roleTenantEnableFlag">启用</a>
              <a-popconfirm v-has="'role:authAssign'" title="确定禁用组织应用角色?" @confirm="() => appRoleDisable(record)" v-if="!record.isDefault && record.roleTenantEnableFlag">
                <a>禁用</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="!record.isDefault"/>
              <a v-has="'role:authAssign'" @click="handleTenantPermission(record)">查看权限</a>
            </span>
          </a-table>
        </div>
        <role-permission-modal ref="modalRolePermission" @ok="modalFormOk"></role-permission-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin.js'
  import RolePermissionModal from './modules/RolePermissionModal.vue'
  import moment from 'moment'
  import Vue from 'vue';
  import { IS_SUPER_TENANT, TENANT_ID } from '@/store/mutation-types'
  import { api, appRoleDisable, appRoleEnable } from './service.js';
  import { getAppInfo } from '@views/dashboard/service';
  import { queryById } from '@views/tenant/service';

  export default {
    name: 'AppRoleList',
    mixins: [JeecgListMixin],
    components: {
      RolePermissionModal,
      moment
    },
    data() {
      let that = this;
      return {
        disableMixinCreated: true,
        tenantId: Vue.ls.get(TENANT_ID),
        isSuperTenant: Vue.ls.get(IS_SUPER_TENANT),
        tenantName: '',
        appList: [],
        currentRoleId: '',
        columns:
          [
            {
              title: '#',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: 'center',
              customRender: function (t, r, index) {
                return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
              }
            }, {
              title: '角色名称',
              dataIndex: 'roleName'
            },
            {
              title: '角色编码',
              dataIndex: 'roleCode'
            },
            {
              title: '是否默认角色',
              align: 'center',
              dataIndex: 'isDefault',
              customRender: function(text) {
                if (text === 1) {
                  return '是'
                } else if (text === 0) {
                  return '否'
                } else {
                  return text
                }
              }
            },
            {
              title: '状态',
              dataIndex: 'roleTenantEnableFlag',
              align: 'center',
              customRender: function(text) {
                if (text === 1) {
                  return '启用'
                } else if (text === 0) {
                  return '禁用'
                } else {
                  return text
                }
              }
            },
            {
              title: '归属应用',
              dataIndex: 'appName'
            },
            {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              scopedSlots: { customRender: 'action' }
            }
          ],
        url: {
          list: api.listEnable,
          delete: ''
        }
      }
    },
    computed: {

    },
    created () {
      getAppInfo({ filter_auth: false }).then(res => {
        if (res.success) {
          this.appList = res.result
        }
      });
      queryById(this.tenantId, {}).then(res => {
        if (res.success) {
          this.tenantName = res.result.name;
        }
      });
      this.queryParam.tenantId = this.tenantId;
      this.searchQuery();
    },
    methods: {

      // 租户角色授权
      handleTenantPermission(record) {
        this.$refs.modalRolePermission.edit(record, true);
      },
      appRoleEnable(record) {
        appRoleEnable(this.tenantId, record).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.searchQuery();
          } else {
            this.$message.warning(res.message);
          }
        })
      },
      appRoleDisable(record) {
        appRoleDisable(this.tenantId, record).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.searchQuery();
          } else {
            this.$message.warning(res.message);
          }
        })
      }
    }
  }
</script>
<style scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 8px
  }
</style>
